<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		<!-- 创建一个外层容器 -->
		<nav class="nav">
			<div class="nav-inner">
				<div>
					<a href="#">
						<img src="img/taobaobackpic1.png" >
						<p>天猫新品</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic2.png" >
						<p>今日爆款</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic3.png" >
						<p>天猫国际</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic4.png" >
						<p>饿了么</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic5.png" >
						<p>天猫超市</p>
					</a>
				</div>
			</div>
			<div class="nav-inner">
				<div>
					<a href="#">
						<img src="img/taobaobackpic6.png" >
						<p>充值中心</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic7.png">
						<p>机票酒店</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic8.png" >
						<p>金币状元</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic9.png" >
						<p>阿里拍卖</p>
					</a>
				</div>
				<div>
					<a href="#">
						<img src="img/taobaobackpic10.png" >
						<p>淘宝吃货</p>
					</a>
				</div>
			</div>
		</nav>
	</body>
</html>
<style type="text/css">
	*{
		font-size: 16px;
	}
/* 	img{
		width: 61px;
		height: 48px;
	} */
	nav{
		width: 100%;
		
	}
	.nav-inner{
		display: flex;
		/* border: 1px solid; */
		justify-content: space-around;
	}
	.nav-inner div{
		width: 18%;
		/* background-color: #BBFFCC; */
		/* flex:auto; */
	}
	img{
		width: 100%;
	}
	a{
		color: #333333;
		font-size: 36px;
		text-align: center;
	}
</style>
